<template>
  <div>
    <!-- <el-card class="leftCard">
      <h1>Hello</h1>
      <img src="../../assets/logo.png"
           alt="">
      <h3>Admin</h3>
      <span>
        对所学知识内容的兴趣可能成为学习动机。
        <br>
        <br>
        ——苏霍姆林斯基
      </span>
    </el-card> -->

    <el-card class="personCard">
      <div class="title"><span>个人信息</span></div>
      <hr>
      <div class="info">
        <div class="info-text u_name">
            用户名: 
            <el-input></el-input>
        </div>
        <div class="info-text u_psd">
            密码: 
            <el-input v-model="u_password"></el-input>
            <span>修改</span>
        </div>
        <div class="info-text">
            联系方式:
            <el-input v-model="u_phone"></el-input>
            <span>修改</span>
            <!-- <el-button type="text" @click="changePhone">修改号码</el-button> -->
        </div> 
        <div class="info-text u_img">
            头像: 
            <el-avatar icon="el-icon-user-solid"></el-avatar>
            <span>上传头像</span>
        </div>
        <div class="info-text u_email">
            绑定邮箱: 
            <span class="emailnum">未绑定</span>
            <!-- <el-button type="text" @click="changeEmail">绑定邮箱</el-button> -->
        </div>
        <div class="u_btn">
            <el-button>取消</el-button>
            <el-button type="primary">确定</el-button>
            <el-button type="text" @click="open">点击打开 Message Box</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Personal",
  data() {
    return {
      input: '',
      u_password: 111,
      u_phone: 1555
    }
  },
  methods: {
      changePhone() {

        this.$prompt('请输入手机号', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^1[3456789]\d{9}$/,
          inputErrorMessage: '手机号不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的手机号是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });    
        });
      },
      changeEmail() {
        this.$prompt('请输入邮箱', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的邮箱是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
      open() {
        this.$prompt('请输入邮箱', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的邮箱是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      }
    },
};
</script>

<style scoped>
.personCard {
  float: right;
  width: 100%;
  height: 800px;
  color: #666;
}

.personCard .title span {
  font-size: 30px;
  margin-bottom: 20px;
}

.info {
  margin-top: 50px;
  margin-left: 100px;
}

.info .info-text {
  margin-bottom: 20px;
}

.info .info-text span {
  color: blue;
  font-size: 15px;
  margin-left:20px;
}

.info .info-text .el-input {
  width: 250px;
  height: 50px;
  margin-left: 50px;
}

.info .u_name .el-input {
  margin-left: 65px;
}

.info .u_psd .el-input {
  margin-left: 80px;
}

.info .u_img .el-avatar {
  margin-left: 100px;
}

.info .u_email {
  margin-top: 50px;
}

.info .u_email .emailnum {
  color: #666;
  margin-left: 60px;
}

.info .u_btn {
  padding-left: 50px;
  margin-top: 60px;
}

.info .u_btn .el-button {
  width: 100px;
  margin-right: 80px;
}
</style>